<template>
  <div class="find">
    <div class="find-nav flex-box" v-show="routeName.indexOf($route.name) >= 0">
      <router-link v-for="(item,index) in findNav" 
        :key="index" 
        :class="{active:avtiveIndex===index}" 
        :to="item.link"><span @click="activeLink(index)">{{item.name}}</span></router-link>
    </div>
    <transition mode="out-in"
      :name="transitionName"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      avtiveIndex: 0,
      routeName: ['findIndex', 'findMain'],
      transitionName: '',
      findNav: [
        {
          name: '活动设计',
          link: '/find'
        },
        {
          name: '项目详情',
          link: '/find/findMain'
        }
      ]
    }
  },
  components: {},
  computed: {
    swiperBanner() {
      return this.$refs.swiperBanner.swiper
    }
  },
  created() {
    this.$navigation.on('forward', () => {
      this.transitionName = 'slide-left'
    })
    this.$navigation.on('back', () => {
      this.transitionName = 'slide-right'
    })
  },
  methods: {
    activeLink(index) {
      this.avtiveIndex = index
    }
  },
  mounted() {
    if (this.$route.name === 'findIndex') {
      this.avtiveIndex = 0
    } else {
      this.avtiveIndex = 1
    }
  }
}
</script>
<style scoped lang="scss">
.find {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 40px;
  .find-nav {
    width: 100%;
    height: 48px;
    background: #f0f0f0 url('../assets/img/img-find/banner-top.jpg') center no-repeat;
    background-size: 100% auto;
    a {
      width: 120px;
      height: 26px;
      border-radius: 100px;
      font-size: 14px;
      line-height: 26px;
      background: #fff;
      color: #02385e;
      span {
        width: 100%;
        display: inline-block;
      }
      &:first-child {
        margin-right: 12px;
      }
      &.active {
        background: #a0c7f2;
        color: #fff;
      }
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
